<template>
  <a-card>
    <a-form ref="formRef" :model="fromData" :rules="rules" :label-col="{ span: 4 }">
     
      <a-form-item label="请假时间" name="startTime">
        <a-range-picker v-model:value="dateRange" :format="dateFormat" @change="changeDateRange" :placeholder="['开始时间', '结束时间']" />
      </a-form-item>

      <a-form-item label="请假天数" name="days">
        <a-input-number v-model:value="fromData.days" :min="0" :precision="1" addon-after="天" />
      </a-form-item>

      <a-form-item label="请假类型" name="leaveType">
        <a-select v-model:value="fromData.leaveType" style="width: 100%">
          <a-select-option value="病假">病假</a-select-option>
          <a-select-option value="事假">事假</a-select-option>
          <a-select-option value="年假">年假</a-select-option>
          <a-select-option value="婚假">婚假</a-select-option>
          <a-select-option value="产假">产假</a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item label="请假事由" name="reason">
        <a-textarea v-model:value="fromData.reason" :rows="4" />
      </a-form-item>

      <a-form-item label="部门选择" name="depts">
        <a-tree-select
          v-model:value="fromData.depts"
          style="width: 100%"
          :tree-data="deptTreeData"
          :field-names="deptProps"
          :multiple="true"
          placeholder="请选择部门"
        />
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script setup name="Leave">
  import { leaveApi } from '/@/api/business/leave';
  import { deployApi } from '/@/api/workflow/deploy';
  import { userApi } from '/@/api/system/user-api';
  import { message } from 'ant-design-vue';
  import dayjs from 'dayjs';

  const props = defineProps({
    formData: {
      type: Object,
      default: {},
    },
  });

  

  const router = useRouter();
  const route = useRoute();
  const { proxy } = getCurrentInstance();

  const formRef = ref();
  const dateRange = ref();
  const dateFormat = 'YYYY-MM-DD';

  const defaultFormData = {
    processKey: undefined,
    startTime: undefined,
    endTime: undefined,
    days: undefined,
    leaveType: undefined,
    reason: undefined,
    applyTime: undefined,
    realityStartTime: undefined,
    realityEndTime: undefined,
    depts: [],
  };

  const rules = {
    startTime: [{ required: true, message: '请选择请假开始时间', trigger: 'change' }],
    endTime: [{ required: true, message: '请选择请假结束时间', trigger: 'change' }],
    days: [{ required: true, message: '请填写请假天数', trigger: 'change' }],
    leaveType: [{ required: true, message: '请选择请假类型', trigger: 'change' }],
    reason: [{ required: true, message: '请填写请假事由', trigger: 'blur' }],
  };

  const fromData = reactive({ ...defaultFormData });


  watch(props.formData, (newVal) => {
    console.log(newVal);
    if (newVal) {
      if (newVal.startTime && newVal.endTime) {
        dateRange.value = [dayjs(newVal.startTime), dayjs(newVal.endTime)];
      }
      Object.assign(fromData, newVal);
    }
  }, { immediate: true ,deep: true});

  const changeDateRange = (dates) => {
    if (dates) {
      fromData.startTime = dates[0].format(dateFormat);
      fromData.endTime = dates[1].format(dateFormat);
      fromData.days = dates[1].diff(dates[0], 'day');
    } else {
      fromData.startTime = undefined;
      fromData.endTime = undefined;
      fromData.days = undefined;
    }
  };

  const variables = ref({});
  const handleSubmit = async () => {
    return new Promise(async (resolve, reject) => {
      try {
        await formRef.value.validate();
        variables.value = {
          days: fromData.days,
          depts: fromData.depts,
        };
        resolve({ formData: fromData, variables: variables.value });
      } catch (error) {
        reject(error);
      }
    });
  };

  const previewSubmit = async () => {
    await formRef.value.validate();
    return await leaveApi.previewLeave(fromData.processKey, fromData);
  };

  const previewSubmit2 = async () => {
    return await leaveApi.previewLeave2(fromData.processKey, fromData);
  };

  const processList = ref([]);
  const deptTreeData = ref([]);

  const deptProps = {
    value: 'departmentId',

    label: 'name',
    key: 'departmentId',
    children: 'children',
  };

  const getModalData = async () => {
    const { data } = await deployApi.listDeploy({ pageNum: 1, pageSize: 9999 });
    processList.value = data.list;
  };

  const getDeptTreeData = async () => {
    const { data } = await userApi.deptTreeSelect();
    deptTreeData.value = data;
  };

  const getInitData = async () => {
    await Promise.all([getModalData(), getDeptTreeData()]);
  };

  onMounted(() => {
    fromData.processKey = route.query.processKey;
    getInitData();
  });

  defineExpose({
    handleSubmit,
    previewSubmit,
    previewSubmit2,
  });
</script>

<style scoped lang="scss"></style>
